<template>
    <div class="container" v-show="show">
        <r-text text="企业发展预警"></r-text>
        <div class="item" style="padding-top:10px;padding-bottom:4px">
            <div>企业数量持续下降月数：</div>
            <div style="color: #64E6E2;">{{data.qyslxj}}</div>
            <div style="opacity:0.72">月</div>
        </div>
        <div class="item">
            <div>当前企业数量占去年年底比值：</div>
            <div style="color: #64E6E2;">{{data.qysllxxj}}</div>
            <div style="opacity:0.72">%</div>
        </div>

        <r-text text="剧组发展预警" style="margin-top:16px"></r-text>
        <div class="item" style="padding-top:10px;padding-bottom:4px">
            <div>今年累计接待剧组人数与去年同期比：</div>
            <div style="color: #64E6E2;">{{data.dqpsjzsl}}</div>
            <div style="opacity:0.72">%</div>
        </div>
        <div class="item">
            <div>今年累计接待剧组数与去年同期比：</div>
            <div style="color: #64E6E2;">{{data.jnljrzjzsl}}</div>
            <div style="opacity:0.72">%</div>
        </div>

        <r-text text="人才发展预警" style="margin-top:16px"></r-text>
        <div class="item" style="padding-top:10px;padding-bottom:4px">
            <div>累计注册群演与去年同期比：</div>
            <div style="color: #64E6E2;">{{data.qyzctbxj}}</div>
            <div style="opacity:0.72">%</div>
        </div>
        <div class="item">
            <div>每家企业拥有从业人员数占去年年底值的比例：</div>
            <div style="color: #64E6E2;">{{data.cyryyqyppzxj}}</div>
            <div style="opacity:0.72">%</div>
        </div>
    </div>
</template>
<script>
import RText from './RText.vue'
export default {
  components: { RText },
  props: {
    show: Boolean,
    data: {
        type: Object,
        default: {}
    }
  }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(2,32,61,0.72);
    top: 35%;
    right: 30%;
    padding: 10px 20px 20px 0;
    border: 1px solid rgba(8,132,255,0.4);
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
    position: absolute;
    z-index: 111;
}
.item {
    display: flex;
    align-items: center;
    padding-left: 28px;
}
</style>
